<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/assets/vendor/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/assets/style/global.css" />
    <title>Socket文件上传</title>
  </head>
  <body>
    <div id="app" class="app">
      <div class="container">
        <h2 class="text-center">Socket文件上传</h2>
      </div>
      <div class="container">
        <form>
          <div class="form-group">
            <label for="exampleInputFile">文件:</label>
            <input id="file" class="form-control-file" type="file">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">进度:</label>
            <div class="progress">
              <div id="progress" class="progress-bar" role="progressbar" style="width: 0%"></div>
            </div>
          </div>
          <button id="submit" type="button" class="btn btn-primary">上传</button>
        </form>
      </div>
    </div>
    <script src="/assets/vendor/crypto/crypto-js.min.js"></script>
    <script src="/assets/vendor/socket.io-client/dist/socket.io.js"></script>
    <script>
      let file, fileData, socket, socketPort = 8090, progress = 0
      // 获取 input file 的 dom 对象
      const inputFile = document.querySelector('#file')
      // 监听 change 事件
      inputFile.addEventListener('change', function() {
        file = this.files[0]
        progress = 0
        document.querySelector('#progress').style.width = progress + '%'
        // socket初始化
        if (!socket) {
          let hostname = location.hostname
          socket = io('ws://' + hostname + ':' + socketPort, {
            transports: ['websocket'],
            reconnectionDelay: 3000, // defaults to 1000
            reconnectionDelayMax: 5000 // defaults to 5000
          })
          // 接收消息
          socket.on('upload_response', (data) => {
            data = data || {}
            if (data.success) {
              progress = 100
              document.querySelector('#progress').style.width = progress + '%'
            }
          })
          // 连接成功后
          socket.on('connected', () => {
            console.log('连接成功')
          })
        }
      })

      // 上传文件
      document.querySelector('#submit').addEventListener('click', function () {
        if (!file) {
          alert('请选择文件')
          return false
        }
        upload({ file })
      }, false)

      // 上传文件
      function upload({ file } = {}) {
        // 文件信息
        let fileSize = file.size, fileName = file.name, fileType = file.type;
        // 上传
        const reader = new FileReader()
        reader.onload = (event) => {
          const buffer = event.target.result
          socket.emit('upload', buffer, {
            fileName: fileName,
            fileSize: fileSize,
            fileType: fileType
          })
        }
        reader.readAsArrayBuffer(file)
      }
    </script>
  </body>
</html>